<template>
  <a-button type="primary" class="bac-btn-class" @click="handleClick">
    <template #icon>
      <icon-delete />
    </template>
    <!-- Use the default slot to avoid extra spaces -->
    <template #default> {{ '修改背景' }}</template>
  </a-button>
  <a-drawer class="a-drawer-class" :width="300" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
    <a-dropdown v-for="n in 6" arrow  @select="handleSelect" :popup-max-height="false">
      <a-button>
        {{contentText[n-1]}}
        <icon-font type="icon-delChangeColor" size="30"></icon-font> </a-button>
      <template #content>
        <a-doption class="doption1-class" v-for="c in color" >
                    <span v-if="n===1" @click="testMethod(c)" :style="`background-color:${c};display:block;width:40px;height:40px;`"></span>
                    <span v-else-if="n===2" @click="changeColor(c)"  :style="`background-color:${c};display:block;width:40px;height:40px;`"></span>
                    <span v-else-if="n===3" @click="modifyPopHeaders(c)"  :style="`background-color:${c};display:block;width:40px;height:40px;`"></span>
                    <span v-else-if="n===4" @click="modifyPopHeaderss(c)"  :style="`background-color:${c};display:block;width:40px;height:40px;`"></span>
                    <span v-else-if="n===5" @click="modifyPopHeadersss(c)"  :style="`background-color:${c};display:block;width:40px;height:40px;`"></span>
                    <span v-else-if="n===6" @click="modifyFont(c)"  :style="`background-color:${c};display:block;width:40px;height:40px;`"></span>
        </a-doption>
      </template>
    </a-dropdown>
  </a-drawer>
</template>

<script>
import {ref, toRefs, watchEffect} from 'vue';
import  {useStore} from "vuex";
import  {IconFont} from "@/components/icon/index.js";
import color from "@/components/util/color.js";
import  '@/style/bak-color.css'
import hooks from "@/hooks/index.js";
import {contentText} from "@/components/util/content.js";
export default {
  methods: {
    testMethod(c) {
      this.$emit('modifyBac', c);
    },
    changeColor(c)
    {
      this.$emit('modifyDark', c);
    },
    modifyPopHeaders(c)
    {
      this.$emit('modifyPopHeader', c);
    },
    modifyPopHeaderss(c)
    {
      this.$emit('modifyPopHeaders', c);
    },
    modifyPopHeadersss(c)
    {
      this.$emit('modifyPopHeaderss', c);
    },

  },
     props: {
       modifyBac: {
         type: Function,
         default: ()=>{},
         required: false,
       },
       testFun:{
         type: Function,
         required: false,
         default: () => {

         }
       }
   },
  data() {
    return {
      messageer: 'value'
    }
  },
  components: {
    IconFont,
  },
  setup() {
    const store = useStore()
    const  {count,y} = hooks();
    const handleSelect = (v) => {
     };
    const visible = ref(false);
    const handleClick = () => {
      visible.value = true;
    };
    const handleOk = () => {
     visible.value = false;
    };
    const handleCancel = () => {
      visible.value = false;
    }
    const  hooks1 =hooks();
    const  {modifyFont}=hooks1;
    watchEffect(()=>{

    })
    return {
      visible,
      handleClick,
      handleOk,
      handleCancel,
      handleSelect,
      color,
      count,
      y,
      modifyFont,
      contentText
    }
  },
};
</script>
<style scoped>
button{
  margin-top:40px;
  height: 46px;
}
</style>
